import {useEffect,useState} from "react"
import { Login } from "../../utils/request/api"
import session from "../../utils/storage/session"
import { Card,Button,Form,Input } from 'antd';
import style from "./index.module.css"
export default (props)=>{
    useEffect(()=>{
        session.remove("tokenover")
    },[])
    return <div className={style.login}>
          <Card title="登录"
           style={{ 
            width: 400,
            height:300,

             }}>
             <Form
            name="basic"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            initialValues={{ remember: true }}
            onFinish={(form)=>{
                // console.log(form);
                Login(form)
                .then(res=>{
                    console.log(res);
                    if(res.meta.code==200){
                        props.history.push("/main/index")
                        session.set("token",res.meta.token)
                        session.set("userinfo",res.data)
                    }
                })
            }}
            // onFinishFailed={onFinishFailed}
            autoComplete="off"
            >
            <Form.Item
                label="账号"
                name="userName"
                initialValue="admin"
                rules={[{ required: true, message: '请输入账号' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="密码"
                name="passWord"
                initialValue="123456"
                rules={[{ required: true, message: '请输入密码!' }]}
            >
                <Input.Password />
            </Form.Item>

          

            <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
                <Button block type="primary" htmlType="submit">
                登录
                </Button>
            </Form.Item>
            </Form>
          </Card>
    </div>
}